<script setup>
import { merge, pick } from 'lodash-es';
import { useRequest, useWatch, useResetForm } from '@/hooks';
import { useSelectIns } from '@/store/zdwh.js';
import { addMeter, editMeter } from '@/api/index.js';
import { Message, MessageBox } from 'element-ui';
const props = defineProps({
  title: { type: String, default: '' },
  typeList: { type: Array, default: () => [] },
  editData: { type: Object, default: null },
});
const emit = defineEmits(['success']);

const selectInsStore = useSelectIns();
const visible = ref(false);
const dsForm = ref(null);

const formData = ref({
  enterpriseCode: null,
  deviceViewId: null,
  deviceName: null,
  deviceType: null,
  position: null,
});
const engType = ref(null);
const engUnit = ref(null);
const rules = ref({
  deviceViewId: { required: true, message: '请输入计量表编号', trigger: 'blur' },
  deviceName: { required: true, message: '请输入计量表名称', trigger: 'blur' },
  deviceType: { required: true, message: '请选择计量表类型', trigger: 'change' },
  position: { required: true, message: '请输入计量表安装地址', trigger: 'blur' },
});

const submitForm = () => {
  dsForm.value.validate(valid => {
    if (!valid) return false;
    if (props.title === '新增') {
      MessageBox.confirm('请确认信息无误', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      }).then(() => {
        runAdd(formData.value);
      });
    }
    if (props.title === '编辑') {
      runEdit(formData.value);
    }
  });
};
const cancel = () => {
  useResetForm(dsForm);
  engType.value = null;
  engUnit.value = null;
  visible.value = false;
};
const changeType = val => {
  engType.value = val.energyTypeName;
  engUnit.value = val.energyTypeUnit;
};

const [, , runAdd] = useRequest(addMeter, {
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      Message.success(res.msg);
      cancel();
      emit('success', true);
    }
  },
});
const [, , runEdit] = useRequest(editMeter, {
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      Message.success(res.msg);
      cancel();
      emit('success', true);
    }
  },
});

useWatch(
  () => selectInsStore.selectIns,
  n => {
    if (n) {
      formData.value.enterpriseCode = n.enterpriseCode;
    }
  },
  { immediate: true },
);
useWatch(
  () => props.editData,
  n => {
    if (n) {
      nextTick(() => {
        formData.value = merge(
          {},
          formData.value,
          pick(n, ['deviceCode', 'deviceViewId', 'deviceName', 'deviceType', 'position']),
        );
        engType.value = n.energyType;
        engUnit.value = n.energyUnit;
      });
    }
  },
);
defineExpose({ visible, formData });
</script>

<template>
  <el-dialog :visible.sync="visible" :before-close="cancel" width="40%" append-to-body>
    <div slot="title" class="dialog-title">
      <span class="tit">
        {{ title }} -
        <span class="u-prim-text">计量表</span>
      </span>
    </div>
    <el-form
      ref="dsForm"
      :model="formData"
      :rules="rules"
      size="small"
      label-width="150px"
      class="u-pl20 u-pr20 dmForm"
    >
      <el-form-item label="计量表编号：" prop="deviceViewId">
        <el-input
          v-filter-input
          v-model.trim="formData.deviceViewId"
          placeholder="请输入计量表编号"
          size="small"
          clearable
        />
      </el-form-item>
      <el-form-item label="计量表名称：" prop="deviceName">
        <el-input
          v-filter-input
          v-model.trim="formData.deviceName"
          placeholder="请输入计量表名称"
          size="small"
          clearable
        />
      </el-form-item>
      <el-form-item label="计量表类型：" prop="deviceType">
        <el-select
          v-model="formData.deviceType"
          :disabled="title === '编辑'"
          value-key="deviceTypeName"
          placeholder="请选择计量表类型"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in typeList"
            :key="item.deviceTypeId"
            :label="item.deviceTypeName"
            :value="item.deviceTypeId"
            @click.native="changeType(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="计量表安装地址：" prop="position">
        <el-input
          v-filter-input
          v-model.trim="formData.position"
          placeholder="请输入计量表安装地址"
          size="small"
          clearable
        />
      </el-form-item>
      <el-form-item label="计量能源类型：">
        <span class="u-prim-text dmForm-showItem">{{ engType }}</span>
      </el-form-item>
      <el-form-item label="计量能源单位：">
        <span class="u-prim-text dmForm-showItem">{{ engUnit }}</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" plain @click="cancel">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm">保 存</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dmForm-showItem {
  padding-left: 15px;
  font-size: 13px;
}
.dmForm :deep(.el-form-item) {
  margin-bottom: 18px;
  .el-form-item__content {
    height: 32px;
    line-height: 32px;
  }
}
</style>
